<template>
  <div class="shop-container">
    <div class="shop-container-top">
      <img src="../../assets/shop_img/x_1.png" alt="" class="img1" @click="$router.push('/home')">
      <p>购物车</p>
      <img src="../../assets/shop_img/x_2.png" alt="" class="img2">
    </div>
    <div class="shop-container-c">
      <div class="shop-container-c-t">
        <p>登录后享受更多优惠</p>
        <div>
          <h2>去登录</h2>
          <img src="../../assets/shop_img/x_3.png" alt="">
        </div>
      </div>
      <div class="shop-container-c-s" v-for="item in shopArr" :key="item.id">
        <img :src="item.img" alt="" class="img1">
        <div class="shop-container-c-s-p">
          <h1>{{ item.name }}</h1>
          <h2>￥{{ item.price }}</h2>
          <div class="shop-container-modified">
            <div class="left" @click="miuns(item.id)">-</div>
            <div class="center">
              <input type="text" v-model="item.num">
            </div>
            <div class="right" @click="add(item.id)">+</div>
          </div>
        </div>
        <img src="../../assets/shop_img/x_5.png" alt="" class="img2" @click="move(item.id)">
      </div>
    </div>
    <div class="shop-container-skip" v-show="shopArr.length === 0">
      <h1>购物车还是空的</h1>
      <div>去逛逛</div>
    </div>
    <div class="shop-container-recommend">
      <div class="shop-container-recommend-t">
        <img src="../../assets/shop_img/x_4.png" alt="">
        <div>
        <h2>实时推荐你的心心念念</h2>
        </div>
      </div>
      <div class="shop-container-recommend-c">
        <shop-recom :shops="shops"></shop-recom>
      </div>
    </div>
    <div class="shop-container-up" v-show="shopArr.length !== 0">
      <div class="shop-container-up-l">
        <h1>共{{$store.getters.aggre}}件 金额：</h1>
        <h2><span>{{$store.getters.total}}</span>元</h2>
      </div>
      <div class="shop-container-up-c">继续购物</div>
      <div class="shop-container-up-r">去结算</div>
    </div>
  </div>
</template>

<script>
import ShopRecom from './children/ShopRecom'
import { mapState } from 'vuex'
export default {
  name: 'Shop',
  data () {
    return {
      shops: []
    }
  },
  components: { ShopRecom },
  methods: {
    // 请求猜你喜欢数据
    _initAxios () {
      this.$axios.get('https://shiyaming1994.github.io/mi/static/homeGoods.json?page=1')
        .then(res => {
          this.shops = res.data
        })
        .catch(err => {
          console.log(err)
        })
    },
    // ++
    add (n) {
      this.$store.commit('adds', n)
    },
    // --
    miuns (n) {
      this.$store.commit('miunss', n)
    },
    // 删除
    move (n) {
      this.$store.commit('moves', n)
    }
  },
  computed: {
    ...mapState(['shopArr'])
  },
  created () {
    this._initAxios()
  }
}
</script>

<style scoped lang="less">
.shop-container-top{
  width: 100%;
  height: .88rem;
  position: fixed;
  top: 0;
  left: 0;
  background: #F2F2F2;
  .img1{
    width: .14rem;
    height: .22rem;
    float: left;
    margin: .34rem 0 0 .34rem;
  }
  p{
    float: left;
    margin-left: 2.26rem;
    font-size: .3rem;
    color: #6E6E6E;
    line-height: .88rem;
  }
  .img2{
    width: .28rem;
    height: .28rem;
    margin: .3rem .3rem 0 0;
    float: right;
  }
}
  .shop-container-c{
    width: 100%;
    background: #FFFFFF;
    padding-top: .88rem;
    box-sizing: border-box;
    .shop-container-c-t{
      width: 100%;
      height: 1.12rem;
      p{
        font-size: .3rem;
        line-height: 1.12rem;
        float: left;
        margin-left: .28rem;
      }
      div{
        width: .94rem;
        height: .28rem;
        float: right;
        margin: .42rem .24rem 0 0;
        h2{
          font-size: .24rem;
          float: left;
          line-height: .28rem;
        }
        img{
          float: right;
          width: .14rem;
          height: .28rem;
        }
      }
    }
    .shop-container-c-s{
      width: 100%;
      height: 2.2rem;
      .img1{
        width: 1.7rem;
        height: 1.84rem;
        float: left;
        margin: .2rem 0 0 .42rem;
      }
      .shop-container-c-s-p{
        width: 2.44rem;
        height: 1.6rem;
        float: left;
        margin: .3rem 0 0 .16rem;
        h1{
          font-size: .24rem;
          color: #9C9E9C;
        }
        h2{
          font-size: .24rem;
          color: #999999;
          margin-top: .08rem;
        }
        .shop-container-modified{
          width: 2.36rem;
          height: .68rem;
          border: 1px solid #999999;
          border-radius: 3px;
          margin-top: .18rem;
          display: flex;
          justify-content: space-between;
          .left{
            width: 35%;
            height: 100%;
            text-align: center;
            line-height: .68rem;
            font-size: .5rem;
            border-right: 1px solid #999999;
          }
          .center{
            width: 30%;
            height: 100%;
            input{
              width: .3rem;
              height: 100%;
              border: none;
              margin-left: .3rem;
            }
          }
          .right{
            width: 35%;
            height: 100%;
            text-align: center;
            line-height: .68rem;
            font-size: .5rem;
            border-left: 1px solid #999999;
          }
        }
      }
      .img2{
        width: .26rem;
        height: .36rem;
        float: right;
        margin: 1.3rem .34rem 0 0;
      }
    }
  }
  .shop-container-skip{
    width: 100%;
    height: 1.2rem;
    h1{
      font-size: .24rem;
      color: #ABABAB;
      line-height: 1.2rem;
      float: left;
      margin-left: 1.62rem;
    }
    div{
      width: 1.18rem;
      height: .38rem;
      border: 1px solid #ABABAB;
      float: left;
      margin: .38rem 0 0 .18rem;
      text-align: center;
      line-height: .38rem;
    }
  }
  .shop-container-recommend{
    width: 100%;
    height: 100%;
    background: #F5F5F5;
    .shop-container-recommend-t{
      width: 100%;
      height: 1.08rem;
      img{
        width: 1.8rem;
        height: .24rem;
        display: block;
        margin: .3rem auto 0;
      }
      div{
        width: 90%;
        height: .001rem;
        border-bottom: 1px solid #B8B8B8;
        margin: .16rem auto 0;
        position: relative;
        h2{
          width: 2.46rem;
          text-align: center;
          font-size: .2rem;
          background: #F5F5F5;
          position: absolute;
          left: 1.7rem;
          top: -.12rem;
        }
      }
    }
    .shop-container-recommend-c{
      width: 100%;
      display: flex;
      flex-wrap: wrap;
      justify-content: space-between;
    }
  }
  .shop-container-up{
    width: 100%;
    height: .88rem;
    background: #fff;
    position: fixed;
    bottom: 0.85rem;
    left: 0;
    z-index: 1000;
    display: flex;
    justify-content: space-between;
    .shop-container-up-l{
      width: 33.3%;
      height: 100%;
      h1{
        font-size: .2rem;
        color: #999999;
        margin: .1rem 0 0 .4rem;
      }
      h2{
        font-size: .2rem;
        color: #999999;
        margin: .04rem 0 0 .4rem;
        span{
          font-size: .4rem;
          color: #FF5722;
        }
      }
    }
    .shop-container-up-c{
      width: 33.3%;
      height: 100%;
      background: #F4F4F4;
      text-align: center;
      line-height: .88rem;
      font-size: .24rem;
      color: #333333;
    }
    .shop-container-up-r{
      width: 33.3%;
      height: 100%;
      background: #FF6700;
      text-align: center;
      line-height: .88rem;
      font-size: .24rem;
      color: #FFF7F2;
    }
  }
</style>
